<!-- -->
<template>
 <div class='pay'>
        <div class="container">
            <div class="part">
                <h4>选择收货地址</h4>
                <div class="box">
                    <div class="box-item selected clear-border">
                        {{selectedAddress.province}} {{selectedAddress.city}} {{selectedAddress.street}} <span><el-link @click="modify(selectedAddress)">修改本地址</el-link></span>
                    </div>
                    <el-collapse>
                        <el-collapse-item title="更改默认地址">
                            <div class="box-item" 
                                    v-for="address in addressList" 
                                    :key="address.id">
                                {{address.province}} {{address.city}} {{address.street}} <span v-show="address != selectedAddress"><el-link @click="change(address)">设为默认地址</el-link></span>
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                </div>  
            </div>

            <div class="part">
                <h4>确认订单信息</h4>
                <div class="box">
                    <el-table
                    :data="dataList"
                    style="width: 100%">
                        <el-table-column
                            align="center"
                            label="商品图片" min-width="180">
                            <template width="40" slot-scope="scope">
                            <el-image :src="scope.row.imgList[0].url" style="width: 100px; height: 100px"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="商品名称"
                            min-width="180">
                        </el-table-column>
                        <el-table-column
                            label="单价"
                            min-width="100">
                            <template width="40" slot-scope="scope">
                            {{'￥' + scope.row.price}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="数量"
                            min-width="200">
                            <template width="40" slot-scope="scope">
                            {{'X' + scope.row.num}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="金额"
                            width="100">
                            <template width="40" slot-scope="scope">
                            {{'￥' + scope.row.sum}}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>

            <div class="part">
                <div class="box">
                    <div class="bill-info">
                        <div class="info">
                            <div class="money"><span class="title">实付款：</span> <span class="money-icon">￥ </span><span class="money-number">{{totalMoney}}</span></div>
                            <div class="other">
                                <div><span class="title">地址：</span> {{selectedAddress.province}} {{selectedAddress.city}} {{selectedAddress.street}}</div>
                                <div><span class="title">收货人：</span>{{user.username}} {{user.phone}} </div>
                            </div>
                        </div>
                        <div class="btn">
                            <el-button type="danger">提交订单</el-button>
                        </div>
                    </div>
                </div>
            </div>
         </div>
    </div>
</template>

<script>
import {mapState} from 'vuex';
export default {
    name: 'Pay',
    data () {
        return {
            selectedAddress: {},
            addressList: [],
            user: {}
        };
    },
    created() {
        // 获取地址
        this.axios.post('/api/address/findByUid', {
            id: 1
        }).then(response => {
            console.log(response)
            this.addressList = response.data.data.list;
            this.selectedAddress = this.addressList[0];
        }).catch(err => {
            console.log(err);
        })
        // 获取用户信息
        this.axios.post('/api/user/findById', {
                id: 1
        }).then(response => {
            // console.log(response)
            this.user = response.data.data;
        }).catch(err => {
            console.log(err);
        })
    },
    computed: {
        ...mapState({
            idList: state => state.buyIdList,
            dataList: state => state.buyDataList,
            totalMoney: state => state.totalMoney
        })
    },
    methods: {
        change(address) {
            this.selectedAddress = address;
        },
        modify(address) {
            alert("修改地址"+ address)
        }
    }
}
</script>
<style scoped>
h4 {
    color: #973444;
}
.pay{
  height: 100%;
  width: 100%;
  padding-top: 60px;
  overflow-x: hidden;
  margin: 0 10%;
}
.container {
    width: 80%;
}
.part {
    width: 80%;
    margin: 0 auto;
    /* padding: 10px; */
}
.box {
    padding:20px; 
}
.box-item {
    width: 100%;
    padding:10px 0;
    padding-left: 10px;
    font-size: 14px;
    border-bottom: 1px dashed #666;
}
.box-item span{
    float: right;
    margin-right: 200px;
}
.selected {
    font-size: 16px;
    background-color: #fff0e8;
}
.clear-border {
    border: 0;
}
.main {
    margin-top: 40px;
}
.bill-info {
    float: right;
    min-width: 60%;
    margin: 40px 0;
}
.info {
    padding: 10px 20px;
    border: 1px solid #f56c6c;
    font-size: 14px;
    text-align: right;
}
.info .title {
    font-weight: 700;
}
.info .money-icon {
    color: #666;
    font-size: 20px;
}
.info .money-number {
    color: #f56c6c;
    font-size: 28px;
}
.btn {
    float: right;
}
.el-button {
    padding: 15px 40px;
}
.money, .other {
    padding: 10px 0;
}
</style>